<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/connectAccount.css" />
    <style>
.mesinp2 .redactive {
    color: #E31C1C;
}
.shuaxin {
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.shuaxin input {
    width:15px;
    height:18px;
}
.redactive {
    color: #E31C1C;
}
.blueactive {
    cursor: pointer;
    color: #3498DB;
}
.mestop .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.mestop {
  color: #fff;
  width: 100%;
  height: 34px;
  background: #3498db;
  border-radius: 3px;
}
.ttile {
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 50px;
    font-size: 14px;
    border-bottom: 1px solid #999;
}
.xmjfmes {
    margin-left: 50px;
    line-height: 35px;
}
.xmjfmes input {
    width: 6px;
    opacity: 0;
    /* color: #E31C1C; */
    z-index: -10;
}
.xmjfmes span:nth-of-type(1) {
    display: inline-block;
    color: #333;
    width: 90px;
    text-align: right;
}
.uploadbox {
    padding-left: 50px;
    margin-top: 30px;
    box-sizing: border-box;
    width:100%;
    border-top: 1px solid #999;
}
.uploadbox .uploadimg {
    margin-top: 20px;
    width:250px;
height:185px;
background:rgba(238,238,238,1);
border-radius:5px;
}
.uploadbox .imgload img {
    margin-top: 20px;
    width: 500px;
}
.uploadimg label{
    width:100%;
   height:100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.uploadimg label p {
    line-height: 40px;
}
@media screen and (max-width: 768px) {
    .mestop {
        margin-top: 20px;
    }
    .xmjfmes {
    margin-left: 0px;
    }
    .uploadbox {
        padding-left: 0px;
    }
}
    </style>
</head>

<body>
    <div class="connectAccount" style="color:#000;">
        <div class="row">
            <div class="col-xs-6 shoko"><a class="message active">购买中心</a></div>
            <div class="col-xs-6 shoko"><a class="message">购买中的现金积分</a></div>
        </div>
        <div class="mes mesinp1">
            <div class="shuaxin">
                <button style="width:70px;height:34px;background:rgba(227,28,28,1);border-radius:3px;color: #fff;margin-right: 20px;">刷新</button>
                <input type="checkbox" style="background: transparent;"> <span>自动刷新</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover" style="text-align:center;color:#000">
                    <tr class="active">
                        <td>卖出会员</td>
                        <td>交易数量</td>
                        <td>支付金额($)</td>
                        <td>支付金额(¥)</td>
                        <td>交易状态</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td>1dsa56</td>
                        <td>500</td>
                        <td class="redactive">7000</td>
                        <td class="redactive">1104040</td>
                        <td>挂单中</td>
                        <td class="blueactive" id="sureTo">点击购买</td>
                    </tr>
                    <tr>
                        <td>1dsa56</td>
                        <td class="redactive">500</td>
                        <td class="redactive">7000</td>
                        <td>1104040</td>
                        <td>挂单中</td>
                        <td class="blueactive" id="sureTo">点击购买</td>
                    </tr>
                    <tr>
                        <td colspan="6" style="color:#666;">暂无更多数据</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="mes mesinp2 hidden">
            <form class="form-horizontal" style="margin-top: 10px;">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-1 control-label">卖出会员</label>
                    <div class="col-sm-3"><input type="text" class="form-control" id="inputEmail3" placeholder="请输入会员名称"></div>
                    <label for="inputEmail3" class="col-sm-1 control-label">卖出数额</label>
                    <div class="col-sm-3"><input type="text" class="form-control" id="inputEmail3" placeholder="请输入卖出的数量"></div>
                    <div class="col-sm-2"><button class="mestop">查询</button></div>
                </div>
            </form>
            <div class="table-responsive" style="margin-top: 30px;">
                <table class="table table-hover" style="text-align:center;color:#000">
                    <tr class="active">
                        <td>订单号</td>
                        <td>卖出会员</td>
                        <td>交易数额</td>
                        <td>支付金额($)</td>
                        <td>支付金额(¥)</td>
                        <td>交易状态</td>
                        <td>时间</td>
                        <td>操作</td>

                    </tr>
                    <tr>
                        <td>N5945asd2541123z</td>
                        <td>C1230456</td>
                        <td>500</td>
                        <td class="redactive">500.00</td>
                        <td class="redactive">500.00</td>
                        <td>已完成</td>
                        <td>2018-12-31 13:56:54</td>
                        <td class="blueactive">查看详情</td>
                    </tr>
                    <tr>
                    <tr>
                        <td>N5945asd2541123z</td>
                        <td>C1230456</td>
                        <td>500</td>
                        <td class="redactive">500.00</td>
                        <td class="redactive">500.00</td>
                        <td>已完成</td>
                        <td>2018-12-31 13:56:54</td>
                        <td class="blueactive">查看详情</td>
                    </tr>
                    </tr>
                    <tr>
                        <td colspan="8" style="color:#666;">暂无更多数据</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="mes mesinp3 hidden">
            <div class="ttile"><i class="iconfont icon-icon_arrow_left"></i><span class="gonelist" style="cursor: pointer;">&nbsp;返回购买列表</span></div>
            <div class="xmjfmes"><span>订单号：</span>&emsp;<span>N5945asd2541123</span></div>
            <div class="xmjfmes"><span>卖出会员：</span>&emsp;<span>C1230456</span></div>
            <div class="xmjfmes"><span>出售数额：</span>&emsp;<span>500</span></div>
            <div class="xmjfmes"><span>支付金额($)：</span>&emsp;<span class="redactive">500.00</span></div>
            <div class="xmjfmes"><span>支付金额(￥)：</span>&emsp;<span class="redactive">500.00</span></div>
            <div class="xmjfmes"><span>银行卡名称：</span>&emsp;<span>N5945asd2541123</span></div>
            <div class="xmjfmes"><span>支付宝账号：</span>&emsp;<span id="text1">13303965565</span>&emsp;<span onclick="copyText1()" class="iconfont icon-copy"
                    style="color:#3498DB;cursor: pointer;"></span><input id="input1" type="text"></div>
            <div class="xmjfmes"><span>微信号：</span>&emsp;<span id="text">13303965565</span>&emsp;<span onclick="copyText()" class="iconfont icon-copy"
                    style="color:#3498DB;cursor: pointer;"></span><input id="input" type="text" readonly></div>
            <div class="xmjfmes"><span>时间：</span>&emsp;<span>2018-12-31 13:56:54</span></div>
            <div class="uploadbox">
                <div class="uploadimg">
                    <label style="cursor: pointer;" title="上传图片" for="inputImage" class="">
                        <input type="file" accept="image/*" name="file" id="inputImage" class="hide">
                        <p><span class="iconfont icon-icon-test" style="font-size: 30px;"></span></p>
                        <p style="font-weight:500;">点击添加照片</p>
                        <p style="color:#999;">上传照片不可超过10M</p>
                    </label>
                </div>
                <p style="color:#E31C1C;line-height: 40px;">*确定上传打款截图后不可更改，谨慎上传打款截图，以保证后台审核成功后尽快完成交易。</p>
            </div>
            <!-- 上传后预览 -->
            <div class="uploadbox">
                <div class="imgload"><img src="img/image/logo.png" class="img-responsive" alt="Responsive image"></div>
                <p style="color:#E31C1C;line-height: 40px;">*确定上传打款截图后不可更改，谨慎上传打款截图，以保证后台审核成功后尽快完成交易。</p>
            </div>
            <div class="btnsure"><button id="sureTo">确定上传</button></div>
        </div>

    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="js/hplus.js"></script>
    <script type="text/javascript" src="js/contabs.js"></script>
    <script src="/static/build/layui.js"></script>
    <script>
        $(".message").each(function (index) {
            $(".message").eq(index).click(function () {
                $(".message").removeClass("active");
                $(this).addClass("active");
                if (index == 0) {
                    $('.mesinp1').removeClass("hidden");
                    $(".mesinp2").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
                if (index == 1) {
                    $('.mesinp2').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
            });
        })
        $(".blueactive").click(function () {
            $('.mesinp3').removeClass("hidden");
            $(".mesinp1").addClass("hidden");
            $(".mesinp2").addClass("hidden");
        })
        $(".gonelist").click(function () {
            $('.mesinp2').removeClass("hidden");
            $(".mesinp1").addClass("hidden");
            $(".mesinp3").addClass("hidden");
        })
        $("#sureTo").click(function () {
            $('.mesinp1').removeClass("hidden");
            $(".mesinp3").addClass("hidden");
            $(".mesinp2").addClass("hidden");
            layer.open({
                title: '温馨提示'
                , content: '您确定要购买该数量的现金积分吗？购买后不可撤销订单。'
                , btn: ['确定', '取消']
                , btn1: function (index, layero) {
                    console.log(222);
                    //确定的回调
                }
            });
        });
        function copyText1() {
            var text = document.getElementById("text1").innerText;
            var input = document.getElementById("input1");
            input.value = text; // 修改文本框的内容
            input.select(); // 选中文本
            console.log(input.value);
            document.execCommand("Copy"); // 执行浏览器复制命令
            layer.open({
                title: false
                ,content: '复制成功'
                ,time: 1000
                ,closeBtn: 0
                ,btn:false
            }); 
        }
        function copyText() {
            var text = document.getElementById("text").innerText;
            var input = document.getElementById("input");
            input.value = text; // 修改文本框的内容
            input.select(); // 选中文本
            console.log(input.value);
            document.execCommand("Copy"); // 执行浏览器复制命令
            layer.open({
                title: false
                ,content: '复制成功'
                ,time: 1000
                ,closeBtn: 0
                ,btn:false
            }); 
        }
    </script>
</body>

</html>